import {useEffect, useState} from 'react';
import {Dimensions} from 'react-native';

export default function useBreakpointValue(values: any) {
  const [value, setValue] = useState(values.base);

  useEffect(() => {
    const updateValue = () => {
      const {width} = Dimensions.get('window');
      if (width >= 1280) setValue(values.xl || values.lg);
      else if (width >= 992) setValue(values.lg);
      else if (width >= 768) setValue(values.md);
      else setValue(values.sm || values.base);
    };

    updateValue();
    const subscription = Dimensions.addEventListener('change', updateValue);
    return () => subscription?.remove();
  }, []);

  return value;
}
